<template>
  <div class="flow-design-operate">
    <!-- <div class="flow-fullscreen">
      <span class="flow-fullscreen-icon"></span>
    </div>  -->
    <div class="flow-design-zoom">
      <div class="flow-design-zoom-less" @click="onZoomOut"></div>
      <span>{{ state.zoomValue }}%</span>
      <div class="flow-design-zoom-more" @click="onZoomIn"></div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ServiceZoom">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	min: {
    type: Number,
    required: false,
    default: 50,
  },
  max: {
    type: Number,
    required: false,
    default: 200,
  },
  modelValue: Number,
});
const state=reactive({zoomValue: props.modelValue})
const emit = defineEmits(['update:modelValue']);
function onZoomOut() {
  let value = state.zoomValue;
  value -= 10;
  if (value <= props.min) {
    value = props.min;
  }
  state.zoomValue = value;
  emit('update:modelValue', value);
}
function onZoomIn() {
  let value = state.zoomValue;
  value += 10;
  if (value >= props.max) {
    value = props.max;
  }
  state.zoomValue = value;
  emit('update:modelValue', value);
}
</script>
